import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {RouterModule, Routes} from "@angular/router";
import {ProductListComponent} from "./products/product-list.component";
import {ProductAddEditComponent} from "./products/product-add-edit.component";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {HomeComponent} from "./home/home.component";
import {ProductService} from "./_services/product.service";
import {PubSubService} from "./_services/pub-sub.service";

const routeConfig: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent },
  {
    path: 'products',
    component: ProductListComponent,
    children: [
      { path: 'add', component: ProductAddEditComponent },
      { path: 'edit/:id', component: ProductAddEditComponent }
    ]
  },
  { path: '**', redirectTo: '' }
];

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    ProductAddEditComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    RouterModule.forRoot(routeConfig),
    ReactiveFormsModule
  ],
  providers: [ProductService, PubSubService],
  bootstrap: [AppComponent]
})
export class AppModule { }
